import PropTypes from "prop-types"
import React, { memo, useCallback, useState } from "react"

import SectionHeader from "@/components/section-header"
import { SectionV2Wrapper } from "./style"
import SectionRooms from "@/components/section-rooms"
import SectionTabs from "@/components/section-tabs"
import SectionFooter from "@/components/section-footer"

const HomeSectionV2 = memo((props) => {
  const { dataInfo } = props

  const initialName = Object.keys(dataInfo?.dest_list)[0]
  const [name, setName] = useState(initialName)
  const tabsName = dataInfo.dest_address?.map((item) => item.name)

  // 事件处理函数
  const tabsClicks = useCallback(function (item, index) {
    setName(item)
  }, [])

  return (
    <SectionV2Wrapper>
      <SectionHeader title={dataInfo.title} subTitle={dataInfo.subtitle} />
      <SectionTabs tabsName={tabsName} tabsClick={tabsClicks} />
      <SectionRooms
        roomList={dataInfo.dest_list?.[name]}
        itemWidth="33.3333%"
      />
      <SectionFooter name={name}/>
    </SectionV2Wrapper>
  )
})

HomeSectionV2.propTypes = {
  dataInfo: PropTypes.object,
}

export default HomeSectionV2
